<template>
  <view>
    <u-navbar
      height="50"
      title="成为团长加盟申请"
      title-width="300"
      title-color="#333"
      title-size="36"
    ></u-navbar>
    <view class="contentView">
      <view class="itemView">
        <view class="itemTitle">联 系 人：</view>
        <input
          placeholder="请输入您的真实姓名"
          placeholder-style="color:#999"
          v-model="contact_name"
        />
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView">
        <view class="itemTitle">联系电话：</view>
        <input
          placeholder="请输入您的联系方式"
          placeholder-style="color:#999"
          v-model="contact_phone"
        />
      </view>
    </view>
    <view class="contentView">
      <view class="itemView" @click="onSetCity()">
        <view class="itemTitle">所在城市：</view>
        <input placeholder="请选择" disabled placeholder-style="color:#333" v-model="city_desc" />
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView">
        <view class="itemTitle">详细地址：</view>
        <input placeholder="精确到门牌号" placeholder-style="color:#999" v-model="detail_address" />
      </view>
    </view>
    <view class="submitBtn" @click="onApply()">提交申请</view>
    <u-picker mode="region" v-model="cityPopup" @confirm="onCityConfirm"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityPopup: false,
      province: '',
      city: '',
      district: '',
      city_desc: '',
      detail_address: '',
      contact_name: '',
      contact_phone: ''
    }
  },
  methods: {
    onSetCity() {
      this.cityPopup = true
    },
    onCityConfirm(res) {
      this.province = res.province.label
      this.city = res.city.label
      this.district = res.area.label
      this.city_desc = this.province + this.city + this.district
    },
    onApply() {
      let self = this
      if (self.$u.test.isEmpty(this.contact_name)) {
        self.$u.toast('请输入联系人')
        return
      }
      if (self.$u.test.isEmpty(this.contact_phone)) {
        self.$u.toast('请输入联系电话')
        return
      }
      if (self.$u.test.isEmpty(this.city_desc)) {
        self.$u.toast('请选择商家地址')
        return
      }
      if (self.$u.test.isEmpty(this.detail_address)) {
        self.$u.toast('请输入详细地址')
        return
      }
      self.$u.api
        .setRegimentApply({
          province: this.province,
          city: this.city,
          district: this.district,
          detail_address: this.detail_address,
          contact: this.contact_name,
          phone: this.contact_phone
        })
        .then((res) => {
          self.$u.toast('提交成功')
          setTimeout(function () {
            uni.navigateBack({
              delta: 1
            })
          }, 500)
        })
    }
  }
}
</script>

<style>
@import url('group-apply.css');

page {
  background: #eeeeef;
}
</style>
